<template>
  <view class="loan-form-container">
    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 借款方/出借方 -->
      <view class="form-item">
        <view class="form-label">{{ isLender ? '借款方' : '出借方' }}</view>
        <view class="form-input-wrapper">
          <input class="form-input" :placeholder="`请填写${isLender ? '借款方' : '出借方'}`" v-model="formData.counterparty" disabled />
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 欠款金额 -->
      <view class="form-item">
        <view class="form-label">欠款金额</view>
        <view class="form-input-wrapper">
          <input class="form-input" placeholder="请填写欠款金额" type="digit" v-model="formData.amount" />
          <view class="unit">元</view>
        </view>
      </view>
      
      <!-- 还款方式 -->
      <view class="form-item">
        <view class="form-label">还款方式</view>
        <view class="form-input-wrapper">
          <input class="form-input" placeholder="一次性还本付息" v-model="formData.repaymentMethod" disabled />
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 年化利率 -->
      <view class="form-item">
        <view class="form-label">年化利率</view>
        <view class="form-input-wrapper">
          <input class="form-input" placeholder="0" type="digit" v-model="formData.interestRate" />
          <view class="unit">%</view>
        </view>
      </view>
      
      <!-- 起始日期 -->
      <view class="form-item">
        <view class="form-label">起始日期</view>
        <view class="form-input-wrapper">
          <input class="form-input" :placeholder="currentDate" v-model="formData.startDate" disabled />
        </view>
      </view>
      
      <!-- 还款日期 -->
      <view class="form-item">
        <view class="form-label">还款日期</view>
        <view class="form-input-wrapper">
          <input class="form-input" placeholder="期限不超过10年" v-model="formData.endDate" disabled />
        </view>
      </view>
    </view>
    
    <!-- 欠条原因 -->
    <view class="reason-section">
      <view class="section-title">欠条原因</view>
      
      <view class="reason-options">
        <view 
          v-for="(reason, index) in reasons" 
          :key="index" 
          class="reason-tag" 
          :class="{ active: formData.reason === reason }"
          @click="selectReason(reason)"
        >
          {{ reason }}
        </view>
      </view>
      
      <view class="reason-input">
        <textarea 
          placeholder="点击输入更详细的欠条原因" 
          v-model="formData.detailedReason"
          class="detailed-reason"
        ></textarea>
      </view>
    </view>
    
    <!-- 下一步按钮 -->
    <view class="next-btn" @click="nextStep">下一步</view>
  </view>
</template>

<script>
export default {
  props: {
    isLender: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentDate: this.formatDate(new Date()),
      reasons: ['线下借款', '赊账', '劳务', '买卖'],
      formData: {
        counterparty: '',
        amount: '',
        repaymentMethod: '一次性还本付息',
        interestRate: '0',
        startDate: this.formatDate(new Date()),
        endDate: '期限不超过10年',
        reason: '',
        detailedReason: ''
      }
    }
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}/${month}/${day}`;
    },
    
    selectReason(reason) {
      this.formData.reason = reason;
    },
    
    nextStep() {
      // 表单验证
      if (!this.formData.counterparty) {
        return uni.showToast({
          title: `请选择${this.isLender ? '借款方' : '出借方'}`,
          icon: 'none'
        });
      }
      
      if (!this.formData.amount) {
        return uni.showToast({
          title: '请填写欠款金额',
          icon: 'none'
        });
      }
      
      if (!this.formData.reason) {
        return uni.showToast({
          title: '请选择欠条原因',
          icon: 'none'
        });
      }
      
      // 保存表单数据
      uni.setStorageSync('loanFormData', this.formData);
      
      // 跳转到确认页面
      uni.navigateTo({
        url: '/pages/loan/confirm'
      });
    }
  }
}
</script>

<style lang="scss">
.loan-form-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 40rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  font-size: 30rpx;
  color: #333;
  width: 160rpx;
}

.form-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.form-input {
  text-align: right;
  font-size: 30rpx;
  color: #333;
  flex: 1;
}

.unit {
  color: #999;
  font-size: 30rpx;
  margin-left: 10rpx;
}

.arrow-icon {
  margin-left: 10rpx;
}

.reason-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.reason-tag {
  padding: 15rpx 30rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.reason-tag.active {
  background-color: #1989fa;
  color: #fff;
}

.reason-input {
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 20rpx;
  min-height: 150rpx;
}

.detailed-reason {
  width: 100%;
  height: 150rpx;
  font-size: 28rpx;
  color: #333;
}

.next-btn {
  height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40rpx 20rpx;
}
</style> 